import React, { useEffect, useState, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { getAuthAxios } from '../lib/authAxios.js';

// 主组件
const App = () => {
    const myAxios = getAuthAxios();
    useEffect(() => {
        function onGlobalVarChange(e) {
            if (['待办工单'].includes(window.getMyGlobalVar('activeTabName'))) {
                initdaiban();
            }
            window.getMyGlobalVar('activeTabName');
        }
        window.addEventListener('MY_GLOBAL_VAR_CHANGE', onGlobalVarChange);
        return () => window.removeEventListener('MY_GLOBAL_VAR_CHANGE', onGlobalVarChange);
    }, []);
    const initdaiban = () => {
        console.log("代办工单---init")
        const iframe = document.querySelector('#a857ca8a6265aa866b4f8d1e4be3b4c7aae512a473e52afa2a1cd7ea34aef6ab');
        const iframeDom = iframe.contentDocument || iframe.contentWindow.document;
        if (!iframeDom) return;
        const TableEl = iframeDom.querySelector("#app > div:nth-child(2) > div > div.tab-comt-root > div.jxm-tab-pagesOne > div:nth-child(1) > div > div > div.card-box.query-card-box > div > div > div.card-third-box_yx > div:nth-child(3) > div > div.table-box")
        observeChanges(
            TableEl,
            tableDom => {
                const listDom = iframeDom.querySelectorAll(
                    '#app > div:nth-child(2) > div > div.tab-comt-root > div.jxm-tab-pagesOne > div:nth-child(1) > div > div > div.card-box.query-card-box > div > div > div.card-third-box_yx > div:nth-child(3) > div > div.table-box > div > div.el-table__body-wrapper.is-scrolling-left > table > tbody > tr'
                );
                if (!listDom) return;
                listDom.forEach((tr, index) => {
                    const fifthTds = tr.querySelectorAll('a');
                    fifthTds.forEach((fifthTd) => {
                        fifthTd &&
                            fifthTd.addEventListener('click', () => {
                                const tds = Array.from(tr.children);
                                const rowData = tds.map(td => td.textContent.trim());
                                let warningObj = {
                                    workOrderNo: '', // 工单编号
                                    processName: '', //流程名称
                                    nodeName: '', //环节名称
                                    supplyUnit: '', //供电单位u
                                    countyName: '', //区县

                                    nodeStartTime: '', //环节开始时间
                                    nodeEndTime: '', //环节结束时间
                                    processStartTime: '', //流程开始时间
                                    startUser: '', //发起负责人
                                    receiver: '', // 接收人

                                    fields: '', // 字段（哪个字段预警）
                                    alertTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 提醒时间
                                };
                                warningObj.workOrderNo = rowData[2];
                                warningObj.processName = rowData[5];
                                warningObj.nodeName = rowData[4];
                                warningObj.supplyUnit = rowData[4];
                                warningObj.countyName = rowData[4];

                                warningObj.nodeStartTime = rowData[8] ? dayjs(rowData[8]).format('YYYY-MM-DD HH:mm:ss') : '';
                                warningObj.nodeEndTime = rowData[9] ? dayjs(rowData[9]).format('YYYY-MM-DD HH:mm:ss') : '';
                                warningObj.processStartTime = rowData[11] ? dayjs(rowData[11]).format('YYYY-MM-DD HH:mm:ss') : '';
                                warningObj.startUser = rowData[21];
                                warningObj.receiver = rowData[19];
                                warningObj.fields = '';
                                console.log('warningObj代办工单', warningObj);
                                window.setMyGlobalVar('warningObj', warningObj);
                            })
                    });
                });
            })

        return null;
    }
}
// 渲染函数
const init = () => {
    const container = document.createElement('div');
    container.style.fontSize = '14px';
    document.body.appendChild(container);
    const root = createRoot(container);
    root.render(<App />);
};

// 执行初始化
init();
